<template>
  <view>
    <!-- 行程 -->
    <view class="trip-card-wrap">
      <view class="card-title">
        <img
          src="https://cdn1.visiotrip.com/h5AndMini/2024-09-19/dsp-title-icon.png"
          class="title-icon"
        />
        <view class="title-txt single-line-text">{{
          tripData.itineraryPlanTitle
        }}</view>
      </view>
      <view class="center-box">
        <view class="top-card">
          <view class="card-view big">
            <view class="card-name">出行日期</view>
            <view class="card-text">{{ tripData.travelDate }}</view>
          </view>
          <view class="line"></view>
          <view class="card-view">
            <view class="card-name">行程天数</view>
            <view class="card-text">{{ tripData.totalDayNum }}<text class="card-name">天</text></view>
          </view>
          <view class="line"></view>
          <view class="card-view">
            <view class="card-name">行程景点</view>
            <view class="card-text">{{ tripData.touristAttractionNum }}<text class="card-name">个</text></view>
          </view>
          <view class="line"></view>
          <view class="card-view">
            <view class="card-name">行程商品</view>
            <view class="card-text">{{ tripData.productQuantity || 0 }}<text class="card-name">个</text></view>
          </view>
        </view>
        <!-- <view class="card-date"
          >出行日期：<text>{{ tripData.travelDate }}</text></view
        > -->
        <!-- <scroll-view class="card-tab" :style="'width: ' + (120*tripData.dayNodeList.length+8) + 'rpx'" scroll-x="true">
          <view
            v-for="(item, index) in tripData.dayNodeList"
            @click="dayClick(index)"
            :key="index"
            class="card-tab-item"
            :class="{ active: index == dayIndex }"
            :data-spmCntSuffix="'ChatAiPage.tripCard@1.tag'"
            :data-custom="index + 1"
            :data-spm="item"
            >Day{{ index + 1 }}</view
          >
        </scroll-view> -->
        <block>
          <view class="card-timeline">
            <view class="card-timeline-title" style="padding: 0">行程明细👇</view>
            <view
              v-for="(dayItem, dayIdx) in tripData.dayNodeList"
              :key="dayIdx"
            >
              <view class="card-timeline-title">
                <text>Day{{dayIdx + 1}}</text>
                <text class="card-timeline-date">{{dayItem.travelDate}}</text>
              </view>
              <view
                v-for="(item, index) in tripData.dayNodeList[dayIdx]
                  .simplePoiNodeList"
                :class="{'card-timeline-box': item.productList.length}"
                :key="index"
                :data-spmCntSuffix="'ChatAiPage.tripCard@2.product'"
                :data-custom="index + 1"
                :data-spm="item"
              >
                <view class="poi-item-box" :class="{poiDisabled: item.identification == 1 || item.identification == 2}">
                  <!-- <view class="product-tips">{{item.productType}}</view> -->
                  <view class="poi-img-box">
                    <image class="poi-img" :src="item.poiImgUrl" mode='aspectFill'></image>
                    <view class="poi-img-tag" v-if="item.identification == 1 || item.identification == 2">{{item.identification == 1 ? '未开放' : '售罄'}}</view>
                  </view>
                  <view class="poi-info-box">
                    <view class="poi-info-title-1" :class="{'poi-info-title-none': item.identification == 1 || item.identification == 2  }">{{ item.poiName }}</view>
                    <view class="poi-info-title-2 omit2">{{
                      item.openingHours
                    }}</view>
                    <view class="poi-info-tag" v-if="item.poiTypeId == 1">
                      <text :class="{'tag-none': item.identification == 1 || item.identification == 2  }">{{item.requiredTickets ? '' : '无'}}需购票</text>
                      <text style="color: #787898">{{item.ticketsMsg}}</text>
                    </view>
                  </view>
                </view>
                <view class="productList-box" v-if="item.productList.length">
                  <view
                    v-for="(proItem, proIndex) in item.productList"
                    :key="proIndex"
                    class="productList-box_item"
                  >
                    <view class="productList-box_item_image view">
                      <image :src="proItem.stdMainPictureUrl" class="image" mode='aspectFill'></image>
                      <view class="product-tips view">{{proItem.productTypeName}}</view>
                    </view>
                    <view class="productList-box_item_detail view">
                      <view class="view">{{ proItem.stdName }}</view>
                      <view class="view">{{ proItem.travelDate }}</view>
                      <block
                        v-for="(skuItem, skuIndex) in proItem.skuProductList"
                        :key="skuIndex"
                      >
                    
                        <view class="view">
                          {{ skuItem.quantitiesOfUnit }}{{ skuItem.skuName }}
                        </view>
                        <view class="view">{{ skuItem.priceOfUnit }}</view>
                        <view v-if="skuIndex !== proItem.skuProductList.length - 1" class="view" style="width: 450rpx;height: 1rpx;background: #B5B5D2;margin: 20rpx 0"></view>
                      </block>
                    </view>
                  </view>
                </view>
                <view
                  class="distance-box"
                  v-if="
                    index !=
                    tripData.dayNodeList[dayIdx].simplePoiNodeList.length - 1
                  "
                  >{{ item.distance }}km</view
                >
              </view>
            </view>
            <!-- <view
              class="poi-item-footer"
              v-if="tripData.dayNodeList[dayIndex].simplePoiNodeList.length < 3"
            >
              <view></view>到底了~<view></view>
            </view> -->
          </view>
          
        </block>
        <view class="trip-btns flex">
          <view class="trip-btn" 
            @click="openEdit"
            :data-spmCntSuffix="'ChatAiPage.tripCard@3.edit'"
            :data-custom="1"
            :data-spm="1"
          >修改</view>
          <view :class="tripData.sell ? 'trip-btn' : 'disabled'" 
            @click="buy(1)"
            :data-spmCntSuffix="'ChatAiPage.tripCard@3.buy'"
            :data-custom="1"
            :data-spm="1"
          >立即购买</view>
        </view>
      </view>
    </view>

    <uni-popup
      ref="editJournelPopup"
      type="bottom"
      :safe-area="false"
      @maskClick="onEditCancel"
    >
      <EditJournel
        ref="editJournel"
        :itineraryPlanId="tripData.itineraryPlanId"
        :journeyDemand="tripData.travellerNumResponse"
        :tripData="tripData"
        :conversationId="conversationId"
        @sure="onEditSure"
        @cancel="onEditCancel"
        @openCalendar="openCalendar"
      ></EditJournel>
    </uni-popup>
    <!-- <commonPopup
      ref="submitPop"
      :showTopOption="false"
      :title="title"
      :showClose="true"
      :background="'#F3F3F3'"
      :zIndex="100"
      @close="submitClose"
    >
      <submitOrder
        ref="submitOrder"
        @moduleCallBack="moduleCallBack"
        @morePeople="morePeople"
         :travelerWith="travelerWith"
        @setParentLevelData="setParentLevelData"
        @payCall="payCall"
      ></submitOrder>
      <template v-slot:footer>
        <view class="footer">
          <view class="price-box">
            <text class="price-1">总计</text><text class="price-2">¥</text
            ><text class="price-3">{{ price }}</text>
          </view>
          <view class="submit-btn" @click="submitClick">提交订单</view>
        </view>
      </template>
    </commonPopup> -->
    <!-- <commonPopup
      ref="moreTripPop"
      :showTopOption="false"
      :title="'选择出行人'"
      :showClose="true"
      :background="'#F3F3F3'"
      :zIndex="110"
    >
      <choseTripPeople
        ref="choseTrip"
        @moreCallBack="moreCallBack"
      ></choseTripPeople>
      <template v-slot:footer>
        <view class="footer">
          <view class="add-btn" @click="addTripClick(1)">添加出行人</view>
          <view class="more-sure-btn" @click="onSave">确认</view>
        </view>
      </template>
    </commonPopup> -->
    <!-- <commonPopup
      ref="addTripPop"
      :showTopOption="false"
      :title="'添加出行人'"
      :showClose="true"
      :background="'#F3F3F3'"
      :zIndex="130"
    >
      <addTripPeople
        ref="addTripPeople"
        @addTripClick="addTripClick"
      ></addTripPeople>
      <template v-slot:footer>
        <view class="footer-1">
          <view class="sure-btn" @click="onSavePeople">保存</view>
        </view>
      </template>
    </commonPopup> -->
    <commonPopup
      ref="payCall"
      :showTopOption="false"
      :showClose="true"
      :background="'#FFFFFF'"
      :zIndex="150"
      @close="submitClose"
    >
      <payResult
        ref="payResult"
        :weChatApplet="weChatApplet"
        :status="payStatus"
        @closePay="closePay"
      ></payResult>
    </commonPopup>
    <uni-popup ref="calendar" type="bottom" :safe-area="false">
      <view class="calendarBox">
        <view class="calendar-tabs">
          <view :class="{ act: calendarAct === 0 }" @click="calendarAct = 0">
            有明确日期
          </view>
        </view>
        <datePicker
          hideHeader
          @change="calendarChange"
          :startDate="choiceDate[0].re"
          :endDate="choiceDate[1].re"
          :daysCount="daysCount"
          v-show="calendarAct === 0"
        ></datePicker>
        <view class="have-plan"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import datePicker from "./date-picker1/components/date-picker/date-picker.vue";
import EditJournel from "./editJournel.vue";
import commonPopup from "./commonPopup/index.vue";
import submitOrder from "./submitOrder/submitOrder.vue";
import choseTripPeople from "./choseTripPeople/choseTripPeople.vue";
import addTripPeople from "./addTripPeople/addTripPeople.vue";
import payResult from "./payResult/payResult.vue";
export default {
  props: {
    travelerWith:{
      type:Boolean
    },
    tripData: {
      type: Object,
    },
    btStatus: {
      type: Boolean,
    },
    conversationId:{
      type: String,
      default: "",
    }
  },
  components: {
    EditJournel,
    commonPopup,
    submitOrder,
    addTripPeople,
    choseTripPeople,
    payResult,
    datePicker,
  },
  data() {
    return {
      daysCount: 365,
      //初始日期
      choiceDate: [{}, {}],
      act: "",
      calendarAct: 0,
      title: "",
      price: 0,
      weChatApplet: "",
      payStatus: true,
      dayIndex: 0,
    };
  },
  mounted() {
    console.log("tripData", this.tripData);
  },
  methods: {
    onEditSure(data) {
      this.$emit("editFina", data);
      this.onEditCancel();
    },
    onEditCancel() {
      this.$refs.editJournelPopup.close();
      this.$refs.editJournel.closeCalendar();
      this.$emit("setTabBar", true);
      uni.$emit("changeScrollStatus", true);
    },
    openCalendar() {
      this.$refs.calendar.open();
    },
    openEdit() {
      uni.$emit("changeScrollStatus", false);
      this.$refs.editJournelPopup.open();
      this.$refs.editJournel.show();
      this.$emit("setTabBar", false);
    },
    //日历选择
    calendarChange(val) {
      console.log(val, "日历");
      this.$refs.editJournel.calendarChange(val);
      this.$refs.calendar.close();
      // console.log(choiceDate)
      // const format = (date) => date.replaceAll("-", "/")
      // this.choiceDate = [{ re: choiceDate[0].re, format: format(choiceDate[0].re) }, { re: choiceDate[1].re, format: format(choiceDate[1].re).slice(5) }]
      // this.$refs.calendar.close();
    },
    handleEdit() {},
    //购买行程
    buy(code) {
      if (!this.$isLogin()) {
        return;
      }
      if (!this.tripData.sell) return;
      const params = {
        itineraryId: this.tripData.itineraryPlanId,
      };
      // let obj = {
      //   code,
      //   params,
      // };
      // this.$refs.submitOrder.init(obj);
      // this.$emit("setTabBar", false);
      // uni.$emit("changeScrollStatus", false);
      this.$navTo('/packageAI/pages/tripOrder/tripOrder', params, 'navigateTo')
    },
    moduleCallBack(data) {
      this.$emit("setTabBar", false);
      this.price = data.price;
      this.title = data.title;
      this.$refs.submitPop.open("bottom");
    },
    addTripClick(code) {
      if (code) {
        //展开
        this.$refs.moreTripPop.close();
        this.$refs.addTripPop.open("bottom");
      } else {
        this.$refs.addTripPop.close();
      }
    },
    submitClick() {
      this.$refs.submitOrder.submitOrder();
    },
    morePeople(data) {
      this.$refs.choseTrip.init(data);
    },
    moreCallBack(code) {
      if (code.type) {
        this.$refs.moreTripPop.open("bottom");
      } else {
        console.log(code);
        this.$refs.moreTripPop.close();
      }
    },
    setParentLevelData(obj) {
      this.price = obj.totalPrice;
    },
    onSave() {
      this.$refs.choseTrip.onSave();
    },
    //添加出行人保存
    onSavePeople() {
      this.$refs.addTripPeople.onSave();
    },
    payCall(weChatApplet) {
      this.weChatApplet = weChatApplet;
      this.$refs.payCall.open("bottom");
      this.payStatus = this.$store.$state.payState;
      this.$refs.submitPop.close();
      this.$emit("setTabBar", false);

      console.log("weChatApplet", weChatApplet);
    },
    closePay() {
      this.$refs.payCall.close();
      this.weChatApplet = "";
    },
    submitClose() {
      console.log("关闭弹框");
      this.$emit("setTabBar", true);
      uni.$emit("changeScrollStatus", true);
    },
    dayClick(index) {
      this.dayIndex = index;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
}

.trip-card-wrap {
  background: rgba(27, 156, 97, 0.20);
  border-radius: 26rpx;
  backdrop-filter: blur(10.8695652173913px);
  margin: 20rpx auto 0 auto;
  .top-card {
    width: 100%;
    height: 107rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(181,181,210,0.1);
    border-radius: 26rpx;
    margin-bottom: 24rpx;
    .card-view {
      width: 145rpx;
      text-align: center;
      &.big {
        width: 208rpx;
      }
      .card-name {
        height: 34rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #B5B5D2;
        line-height: 34rpx;
      }
      .card-text {
        font-weight: 600;
        font-size: 28rpx;
        color: #131328;
        line-height: 40rpx;
      }
    }
    .line {
      width: 1rpx;
      height: 57rpx;
      background: #E4E4F4;
    }
  }
  .card-date {
    font-weight: 600;
    font-size: 28rpx;
    color: $sl-color-black;
    line-height: 40rpx;
  }

  .trip-btns {
    width: calc(100% - 40rpx);
    position: absolute;
    display: flex;
    margin-top: 24rpx;
    font-weight: 600;
    bottom: 24rpx;
  }
  .disabled {
    width: 317rpx;
    margin-left: 14rpx;
    color: #ffffff;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 16rpx;
    text-align: center;
    background: rgba(180, 239, 78, 0.4);
  }
  .trip-btn {
    width: 317rpx;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 16rpx;
    text-align: center;
    color: #131328;

    &:first-child {
      background: #E4E4F4;
    }

    &:last-child {
      margin-left: 12rpx;
      background: #B4EF4E;
    }
  }
}

.calendar-tabs {
  display: flex;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #696969;
  text-align: center;

  > view {
    width: 200rpx;
    padding: 36rpx 0;
  }

  .act {
    color: #000;
    font-weight: 600;
    font-size: 30rpx;
  }
}

.calendarBox {
  height: 800rpx;
  border-radius: 30rpx 30rpx 0 0;
  background: #ffffff;
}
//提交订单底部样式开始
.footer {
  width: 100%;
  height: 156rpx;
  background: #ffffff;
  box-shadow: 0rpx -6rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  .submit-btn {
    width: 224rpx;
    height: 76rpx;
    border-radius: 38rpx;
    background: $sl-color-light-blue;
    text-align: center;
    line-height: 76rpx;
    color: #ffffff;
    font-size: 36rpx;
    margin-right: 30rpx;
    margin-top: 23rpx;
  }
  .price-box {
    height: 76rpx;
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    margin-top: 23rpx;
    .price-1 {
      color: #555555;
      font-size: 24rpx;
    }
    .price-2 {
      color: #ff4f01;
      font-size: 32rpx;
      padding: 0 2rpx 0 10rpx;
    }
    .price-3 {
      color: #ff4f01;
      font-size: 56rpx;
    }
  }
  .more-sure-btn {
    width: 348rpx;
    height: 88rpx;
    background: $sl-color-light-blue;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
    border-radius: 44rpx;
    margin-top: 25rpx;
    margin-right: 20rpx;
  }
  .add-btn {
    width: 348rpx;
    height: 88rpx;
    background: #ffffff;
    text-align: center;
    line-height: 88rpx;
    color: #547ae4;
    font-weight: 600;
    border-radius: 44rpx;
    margin-top: 25rpx;
    border: 2rpx solid #547ae4;
    margin-left: 20rpx;
  }
}
//提交订单底部样式结束
//保存按钮样式
.footer-1 {
  width: 750rpx;
  height: 172rpx;
  background: #ffffff;
  box-shadow: 0rpx -6rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  .sure-btn {
    width: 710rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #ffffff;
    background: $sl-color-light-blue;
    border-radius: 44rpx;
    margin-top: 25rpx;
  }
}
.card-tab {
  white-space: nowrap;
  max-width: 646rpx;
  background: rgba(19,19,40,0.7);
  border-radius: 32rpx;
  margin: 24rpx 0;
}
.card-timeline {
  height: 756rpx;
  overflow-y: auto;
  .card-timeline-title {
    font-weight: 600;
    font-size: 32rpx;
    color: #131328;
    line-height: 52rpx;
    padding: 24rpx 0;
    .card-timeline-date {
      font-weight: 400;
      font-size: 28rpx;
      color: #B5B5D2;
      line-height: 40rpx;
      margin-left: 28rpx;
    }
  }
  .card-timeline-box {
    background: rgba(228,228,244,0.4);
    border-radius: 16rpx;
  }
}
.card-tab-item.active {
  width: 120rpx;
  height: 56rpx;
  background: #ffffff;
  border-radius: 28rpx;
  color: $sl-color-black;
  font-weight: 600;
  margin: 4rpx;
  line-height: 56rpx;
  font-weight: 600;
}
.card-tab-item {
  display: inline-block;
  width: 120rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  border-radius: 28rpx;
}
.poi-item-box {
  min-height: 134rpx;
  background: #ffffff;
  border-radius: 16rpx;
  display: flex;
  padding: 10rpx 0;
  position: relative;
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0,0,0,0.06);
  &.poiDisabled {
    background: #F6F6F9;
    .poi-info-title-1 {
      color: #767697;
      &.poi-info-title-none{
        color: #767697;
      }
    }
    .poi-info-tag {
      color: #767697;
      .tag-none {
        color:#767697;
      }
    }
  }
  .product-tips{
    width: 68rpx;
    height: 30rpx;
    border-radius: 16rpx 0 16rpx 0;
    background: #F8B840;
    text-align: center;
    line-height: 30rpx;
    color: #fff;
    font-size: 20rpx;
    position: absolute;
    left: 0;
    top: 0;
  }
  .poi-img-box {
    width: 126rpx;
    height: 126rpx;
    position: relative;
    border-radius: 0rpx 0rpx 10rpx 10rpx;
    margin: 0 16rpx 0 10rpx;
    .poi-img-tag {
      width: 126rpx;
      height: 44rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #B4EF4E;
      line-height: 44rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.45);
      border-radius: 0rpx 0rpx 10rpx 10rpx;
      text-align: center;
    }
  }
  // align-items: center;
  .poi-img {
    width: 126rpx;
    height: 126rpx;
    border-radius: 10rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .poi-info-box {
    flex: 1;
    min-height: 114rpx;
    padding-right: 20rpx;
    .poi-info-title-1 {
      font-size: 32rpx;
      color: $sl-color-dark-grey;
      font-weight: 600;
      line-height: 46rpx;
    }
    .poi-info-title-2 {
      font-size: 28rpx;
      color: $sl-color-grey;
      line-height: 40rpx;
    }
    .poi-info-tag {
      font-size: 24rpx;
      color: #F2A81E;
      line-height: 34rpx;
      margin-top: 4rpx;
    }
  }
}

.productList-box {

  .productList-box_item {
    .productList-box_item_image {
      position: relative;
    }
    display: flex;
    border-radius: 16rpx;
    padding: 12rpx 12rpx 24rpx 12rpx;
    padding-right: 46rpx;
    position: relative;
    .product-tips{
      width: 68rpx;
      height: 30rpx;
      border-radius: 10rpx 0 10rpx 0;
      background: #F8B840;
      text-align: center;
      line-height: 30rpx;
      color: #fff;
      font-size: 20rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
    .view {
      overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
    }

    .image {
        width: 126rpx;
        height: 166rpx;
        margin-right: 16rpx;
        border-radius: 10rpx;
    }

    >.view:first-child {
      flex-shrink: 0;
    }

    .productList-box_item_detail {
      font-size: 28rpx;
      font-weight: 400;
      color: #767697;
      line-height: 40rpx;
      flex: 1;
      >view {
        &:first-child {
          font-size: 32rpx;
          font-weight: 600;
          color: #404062;
          line-height: 46rpx;
          margin-top: 0;
        }
      }
    }
  }
}

// .poi-item-footer {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 20rpx;
//   font-family: PingFangSC-Regular, PingFang SC;
//   font-weight: 400;
//   color: #b6b6d3;
//   line-height: 20rpx;
//   margin: 29rpx 0;
//   view {
//     width: 59rpx;
//     height: 1rpx;
//     background: #b6b6d3;
//     margin: 0 17rpx;
//   }
// }
.distance-box {
  line-height: 34rpx;
  color: #b5b5d2;
  font-size: 24rpx;
  padding-left: 10rpx;
  margin: 12rpx 10rpx 12rpx 0;
}
.card-title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 24rpx;
  height: 82rpx;
  .title-icon {
    width: 36rpx;
    height: 36rpx;
  }
  .title-txt {
    color: $sl-color-black;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 46rpx;
    padding-left: 8rpx;
    flex: 1;
  }
}
.center-box {
  position: relative;
  width: 100%;
  // min-height: 100rpx;
  height: 1060rpx;
  background: #F1FAFA;
  border-radius: 26rpx;
  border: 3rpx solid #FFFFFF;
  padding: 20rpx;
}
</style>
